<template>
    <div>
        <!-- el-breadcrumb 面包屑 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{path:'/hall'}">影院列表</el-breadcrumb-item>
            <el-breadcrumb-item>影厅列表</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- el-card 卡片组件-->
        <el-card>
            <!-- el-col 行布局 -->
            <!-- gutter 属性来指定每一栏之间的间隔 -->
            <el-row :gutter="20">
                <!-- el-col 列布局 -->
                <el-col :span="20">
                    <!-- 使用clearable属性即可得到一个可清空的输入框 -->
                    <el-col :span="6">
                        <el-input placeholder="请输入影厅名称" clearable v-model="searchForm.hallName" @clear="searchHall">
                            <!--<el-button slot="append" icon="el-icon-search" @click="searchHall"></el-button>-->
                        </el-input>
                    </el-col>
                    <el-col :span="6">
                        <el-input placeholder="请输入影院名称" clearable v-model="searchForm.cinemaName" @clear="searchHall">
                        </el-input>
                    </el-col>
                    <el-col :span="6">
                        <el-select v-model="searchForm.hallTypeId" placeholder="请选择">
                            <el-option
                                    v-for="item in hallType"
                                    :key="item.hallTypeId"
                                    :label="item.hallTypeName"
                                    :value="item.hallTypeId">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="2">
                        <el-button type="primary" @click="searchHall()"><i class="el-icon-search"></i>搜索</el-button>
                    </el-col>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="addDialogVisible=true">添加影厅</el-button>
                </el-col>
            </el-row>

            <el-table :data="hallList" border stripe :header-cell-style="tableCenter" :cell-style="tableCenter">
                <!-- border 边框 -->
                <!-- stripe 斑马纹 -->
                <el-table-column label="#" type="index"></el-table-column>
                <el-table-column label="影厅名称" prop="hallName"></el-table-column>
                <el-table-column label="座位排数" prop="hallRow"></el-table-column>
                <el-table-column label="座位列数" prop="hallCol"></el-table-column>
                <el-table-column label="所属影院" prop="cinemaName"></el-table-column>
                <el-table-column label="影厅类型" prop="hallType.hallTypeName"></el-table-column>

                <!--<el-table-column label="类型">-->

                <!--<template slot-scope="sc">{{sc.row.urlType==1?'菜单权限':'接口权限'}}</template>-->
                <!--</el-table-column>-->

                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <!-- 通过 slot-scope 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据 -->
                        <el-button type="warning" size="mini" @click="showEditDialog(scope.row)">修改</el-button>
                        <el-button type="danger" size="mini" @click="removeHallById(scope.row.hallId)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页-->
            <!-- size-change和current-change事件来处理页码大小和当前页变动时候触发的事件 -->
            <!-- 设置layout，表示需要显示的内容，用逗号分隔，布局元素会依次显示。 -->
            <!-- background 按钮背景深色 -->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[5, 10 , 15, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    background
            ></el-pagination>
        </el-card>

        <!--添加影院-->
        <el-dialog
            title="添加影院"
            :visible.sync="addDialogVisible"
            width="30%"
            @close="addHallFormClose"
        >
            <el-form
                :model="addHallForm"
                :rules="hallRules"
                ref="hallRef"
                label-width="80px"
                class="demo-ruleForm"
            >
                <el-row :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="影厅名称" prop="hallName">
                            <el-input v-model="addHallForm.hallName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="影厅类型" prop="hallType">
                            <el-select v-model="addHallForm.hallType" placeholder="请选择">
                                <el-option
                                        v-for="item in hallType"
                                        :key="item.hallTypeId"
                                        :label="item.hallTypeName"
                                        :value="item.hallTypeId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="座位排数" prop="hallRow">
                            <el-input v-model.number="addHallForm.hallRow"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="座位列数" prop="hallCol">
                            <el-input v-model.number="addHallForm.hallCol"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-form-item label=" " prop="cinemaId" >
                    <el-input type="hidden" v-model="addHallForm.cinemaId"/>
                </el-form-item>

            </el-form>

            <el-form
                :model="searchCinemaResult"
                :rules="searchCinemaRules"
                ref="searchCinemaRef"
                label-width="80px"
                class="demo-ruleForm"
            >
                <el-row :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="影院名称" prop="cinemaName">
                            <el-input v-model="searchCinemaResult.cinemaName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">

                        <el-button type="success" @click="searchCinemaByName">匹配</el-button>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addHall">确定</el-button>
                <el-button @click="addDialogVisible = false">取消</el-button>
            </span>
        </el-dialog>

        <!--修改影院-->
        <el-dialog
                title="添加影院"
                :visible.sync="updateDialogVisible"
                width="30%"
                @close="updateHallFormClose"
        >
            <el-form
                    :model="updateHallForm"
                    :rules="hallRules"
                    ref="hallRef"
                    label-width="80px"
                    class="demo-ruleForm"
            >
                <el-row :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="影厅名称" prop="hallName">
                            <el-input v-model="updateHallForm.hallName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="影厅类型" prop="hallType">
                            <el-select v-model="updateHallForm.hallType" placeholder="请选择">
                                <el-option
                                    v-for="item in hallType"
                                    :key="item.hallTypeId"
                                    :label="item.hallTypeName"
                                    :value="item.hallTypeId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="座位排数" prop="hallRow">
                            <el-input v-model.number="updateHallForm.hallRow"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="座位列数" prop="hallCol">
                            <el-input v-model.number="updateHallForm.hallCol"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-form-item label=" " prop="cinemaId" >
                    <el-input type="hidden" v-model="updateHallForm.cinemaId"/>
                </el-form-item>

            </el-form>

            <el-form
                    :model="searchCinemaResult"
                    :rules="searchCinemaRules"
                    ref="searchCinemaRef"
                    label-width="80px"
                    class="demo-ruleForm"
            >
                <el-row :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="影院名称" prop="cinemaName">
                            <el-input v-model="searchCinemaResult.cinemaName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">

                        <el-button type="success" @click="searchCinemaByName">匹配</el-button>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="updateHall">确定</el-button>
                <el-button @click="updateDialogVisible = false">取消</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        name: "Hall",
        data() {
            return {
                //影厅列表
                hallList: [],
                //影厅类型，实际上会被替换
                hallType: [
                    {hallTypeId:"",hallTypeName:""}
                ],
                //分页的三个属性
                total: 0,
                pageNum: 1,
                pageSize: 5,
                //搜索栏
                searchForm: {
                    pageNum: "",
                    pageSize: "",
                    hallName: "",
                    cinemaName: "",
                    hallTypeId: ""
                },
                searchCinemaResult:{
                    cinemaName:"",
                    cinemaId:""
                },
                addHallForm:{
                    hallName:"",
                    hallType:"",
                    hallRow:"",
                    hallCol:"",
                    cinemaId:""
                },
                addDialogVisible:false,
                
                updateHallForm:{
                    hallName:"",
                    hallType:"",
                    hallRow:"",
                    hallCol:"",
                    cinemaId:""
                },
                updateDialogVisible:false,
                
                searchCinemaRules:{
                    cinemaName: [
                        { required: true, message: "请输入影院名称", trigger: "blur" },
                        {
                            min: 1,
                            max: 20,
                            message: "电影名称在1-20个字符之间",
                            trigger: "blur"
                        }
                    ],
                },
                hallRules:{
                    hallName: [
                        { required: true, message: "请输入影厅名称", trigger: "blur" },
                        {
                            min: 1,
                            max: 20,
                            message: "影院名称在1-20个字符之间",
                            trigger: "blur"
                        }
                    ],
                    hallType: [
                        { required: true, message: "请选择影厅类型", trigger: "blur" },
                    ],
                    hallRow:[
                        { required:true,message:"请输入座位行数",trigger:"blur"},
                        {
                            type: 'number',
                            // max: 20, //经纬度字符超过20
                            message: "请输入数字",
                            trigger: "blur"
                        }
                    ],
                    hallCol:[
                        { required:true,message:"请输入座位列数",trigger:"blur"},
                        {
                            type: 'number',
                            message: "请输入数字",
                            trigger: "blur"
                        }
                    ],
                    cinemaId:[
                        { required:true,message:"请匹配影院",trigger:"blur"},
                    ]
                }


            }
        },
        methods: {
            //表格居中
            tableCenter() {
                return "text-align:center"
            },
            //每页大小改变
            handleSizeChange(newSize) {
                this.searchForm.pageSize = newSize;
                this.searchHall();
            },
            //每页页码改变
            handleCurrentChange(newPage) {
                this.searchForm.pageNum = newPage;
                this.searchHall();
            },
            //匹配影院
            searchCinemaByName(){
                this.$refs.searchCinemaRef.validate(valid => {
                    if (!valid) {
                        this.$message.error("输入有误")
                        return;
                    }
                    this.$api.hall.searchCinemaByName(this.searchCinemaResult.cinemaName)
                        .then((res) => {
                            if (res.data.code == "200") {
                                this.searchCinemaResult = res.data.data;
                                // console.log(this.searchCinemaResult);
                                this.addHallForm.cinemaId = this.searchCinemaResult.cinemaId;
                                this.updateHallForm.cinemaId = this.searchCinemaResult.cinemaId;
                            } else {
                                this.$message.error(res.data.msg);
                            }
                        })
                })
            },
            //查询
            searchHall() {
                // console.log("执行searchHall");
                this.$api.hall.searchHallByCon(this.searchForm)
                    .then((res) => {
                        // console.log(res);
                        if (res.data.code == "200") {
                            this.hallList = res.data.data.list;
                            this.total = res.data.data.total;
                            this.pageNum = res.data.data.pageNum;
                            this.pageSize = res.data.data.pageSize;

                        } else {
                            this.$message({
                                showClose: true,
                                message: '查询失败',
                                type: 'error'
                            });
                        }
                    })
            },
            searchHallType(){
                this.$api.hall.searchHallType()
                    .then((res) => {
                        // console.log(res);
                        if (res.data.code == "200") {
                            this.hallType = res.data.data;

                        } else {
                            this.$message({
                                showClose: true,
                                message: '查询失败',
                                type: 'error'
                            });
                        }
                    })
            },
            addHall(){
                // console.log(this.addHallForm);
                this.$refs.hallRef.validate(valid => {
                    if (!valid) {
                        this.$message.error("输入有误")
                        return;
                    }
                    
                    this.addHallParam = JSON.stringify(this.addHallForm);
                    // console.log(this.addHallParam);
                    // console.log(this.addHallForm);
                    //执行添加
                    this.$api.hall.addHallFormData(this.addHallParam)
                        .then((res)=>{
                            // console.log(res);
                            if (res.data.code=="200"){
                                this.$message.success(res.data.msg);
                            }else {
                                this.$message.error(res.data.msg);
                            }
                            this.$refs.hallRef.resetFields();
                            this.addDialogVisible=false;
                            this.searchHall();
                        })
                })
            },
            // 添加影院弹窗关闭
            addHallFormClose(){
                this.$refs.hallRef.resetFields();
            },

            showEditDialog(obj){
                this.updateDialogVisible=true;
                // console.log(this.updateHallForm);
                this.updateHallForm = obj;
                // console.log(obj);
                this.updateHallForm.hallType = this.updateHallForm.hallType.hallTypeId;
                this.searchCinemaResult.cinemaId = obj.cinemaId;
                this.searchCinemaResult.cinemaName = obj.cinemaName;
            },
            updateHall(){
                // console.log(this.updateHallForm);
                this.$refs.hallRef.validate(valid => {
                    if (!valid) {
                        this.$message.error("输入有误")
                        return;
                    }

                    this.updateHallParam = JSON.stringify(this.updateHallForm);
                    // console.log(this.updateHallParam);
                    // console.log(this.updateHallForm);
                    //执行添加
                    this.$api.hall.updateHallFormData(this.updateHallParam)
                        .then((res)=>{
                            // console.log(res);
                            if (res.data.code=="200"){
                                this.$message.success(res.data.msg);
                            }else {
                                this.$message.error(res.data.msg);
                            }
                            this.$refs.hallRef.resetFields();
                            this.updateDialogVisible=false;
                            this.searchHall();
                        })
                })
            },
            // 添加影院弹窗关闭
            updateHallFormClose(){
                this.$refs.hallRef.resetFields();
            },

            removeHallById(id) {
                this.$confirm('确定要删除这个影厅吗？一旦删除，只能去数据库里修改状态。是否继续？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$api.hall.deleteHallById(id)
                        .then((res)=>{
                            if (res.data.code=="200"){
                                this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                                this.searchHall();
                            }else {
                                this.$message({
                                    type: 'error',
                                    message: '删除失败!'
                                });
                            }
                        });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },

        },
        created() {
            this.searchHallType();
            this.searchHall();
        }
    }
</script>

<style scoped>

</style>